<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        /* .box{
            height: 100px;
        }
        .box img{
            height: 100%;
            vertical-align: middle;
        }
        .box span{
            vertical-align: middle;
        } */

        /* .an{
            width: 200px;
            height: 100px;
            background-color: black;
            transition: width ease 1s;
        } */

        .msg-box{
            /*相对于最近的一个非静态元素进行定位，如果没有相对于body进行定位*/
            /* position: absolute; */
            position: fixed;
            background-color: white;
            top: 10px;
            right: 10px;
            box-shadow: 0 0 4px #666;
            border-radius: 6px;
            width: 300px;
            padding: 12px;
            display: flex;
            flex-flow: row nowrap;
            line-height: 20px;
            /*  */
            opacity: 1;
            transform: translate(0%,0);
            transition: top ease 200ms;
        }
        .msg-box.in{
            animation: moveIn ease 400ms forwards;
        }
        .msg-box.out{
            animation: moveOut ease 200ms forwards;
        }
        @keyframes moveIn {
            0%{
                transform: translate(100%,0);
                right: -6px;
            }
            100%{
                transform: translate(0%,0);
                right: 10px;
            }
        }
        @keyframes moveOut {
            0%{
               opacity: 1;
            }
            100%{
               opacity: 0;
            }
        }
        .msg-box p{
            margin: 0px;
        }
        .msg-box .icon,.msg-box .btn{
            width: 24px;
            /* font-size: 20px; */
            text-align: center;
        }
        .msg-box .btn .iconfont{
            font-size: 12px;
        }
        .msg-box .icon .iconfont{
            font-size: 18px;
            color: #67c23a;
        }
        .msg-box .desc{
            font-size: 14px;
            flex-grow: 1;
            padding: 0px 4px;
            font-weight: bold;
        }

    </style>
    <script>
        let topSize = 10;
        let msgDoms = {};
        function openSuccess(){
            let msgBoxDom = document.createElement("div");
            msgBoxDom.classList.add("msg-box","in");
            msgBoxDom.style.top = topSize + "px";
            
            let iconDom = document.createElement("div");
            iconDom.classList.add("icon");
            let fontDom = document.createElement("i");
            fontDom.classList.add("iconfont","icon-success1");
            iconDom.appendChild(fontDom);
            msgBoxDom.appendChild(iconDom);

            let descDom = document.createElement("div");
            descDom.classList.add("desc");
            let titleDom = document.createElement("p");
            titleDom.classList.add("title");
            titleDom.textContent = "消息";
            descDom.appendChild(titleDom);
            msgBoxDom.appendChild(descDom);

            let btnDom = document.createElement("div");
            btnDom.classList.add("btn");
            let closeDom = document.createElement("i");
            closeDom.classList.add("iconfont","icon-close2");
            btnDom.appendChild(closeDom);
            msgBoxDom.appendChild(btnDom);

            document.body.appendChild(msgBoxDom);

            // 真实项目中一般会手写key的生成规则，或者直接选择对应的插件完成
            let key = Math.random();
            msgDoms[key] = msgBoxDom;

            // 计算后的 DOM元素的高度  ==> 这些属性必须是元素存于页面时才可以获取到对应值
            let msgBoxDomH = msgBoxDom.clientHeight;
            // console.log(msgBoxDomH);
            // 记录下一个提示框的top位置
            topSize = topSize + msgBoxDomH + 10;
            msgBoxDom.addEventListener("animationend",function(event){
                if(event.animationName=="moveOut"){
                    console.log("动画执行完成",event)
                    topSize = topSize -( msgBoxDomH + 10);
                    document.body.removeChild(msgBoxDom);
                    // 对象中如何删除一个已知元素
                    delete msgDoms[key];
                    for (let k in msgDoms) {
                        // parseFloat parseInt 属于逐位数值转换
                        msgDoms[k].style.top = (parseFloat(msgDoms[k].style.top) - ( msgBoxDomH + 10)) + "px";
                    }
                }
            })

            setTimeout(function(){
                msgBoxDom.classList.remove("in");
                msgBoxDom.classList.add("out");
            },5000)
        }
    </script>
</head>
<body>
    <!-- <div class="box">
        <img src="../assets/img/01.png" alt="" srcset="">
        <span>文本</span>
    </div> -->
    <!-- <div class="msg-box">
        <div class="icon">
            <i class="iconfont icon-success1"></i>
        </div>
        <div class="desc">
            <p class="title">消息</p>
            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus amet perspiciatis, magni possimus laboriosam vel illo ut error eveniet temporibus officiis ab similique neque exercitationem animi nihil, voluptatum commodi. Est? </p>
        </div>
        <div class="btn">
            <i class="iconfont icon-close2"></i>
        </div>
    </div> -->

    <!-- <div class="an"></div> -->

    <input type="button" value="success" onclick="openSuccess()">
</body>
</html>